<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .my-svg-path {
            stroke-dasharray: 50px, 300px;
            stroke-dashoffset: 0;
            /* transition: stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease 0s; */
            transform: rotateZ(90deg)rotateX(180deg);
            transform-origin: 50% 50%;
            animation: svg-loading 2s linear infinite
        }
        @keyframes svg-loading{
            0%{
                transform: rotateZ(90deg)rotateX(180deg); 
            }
            100%{
                transform: rotateZ(450deg)rotateX(180deg);
            }
        }
    </style>
</head>

<body>
    <div style="width:20px; height: 20px;">
        <svg viewBox="0 0 100 100">
            <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0  a 40 40 0 1 0 -80 0" fill="none" stroke="#e5e9f2"
                stroke-width="5">
                ></path>
            <path d="M 50 50 m -40 0 a 40 40 0 1 0 80 0  a 40 40 0 1 0 -80 0" fill="none" stroke="#20a0ff"
                stroke-linecap="round" class="my-svg-path" transform="rotate(90,50,50)" stroke-width="5">
            </path>
        </svg>
    </div>
</body>

</html>